<template>
  <div>
    <!-- 自定义指令:自己定义指令

        提问：自定义指令的生命周期
             自定义指令由哪几部分组成
             平时开发自定义指令用哪些生命周期
             自定义指令能不能用this(指令所在组件的this)
        v-on:click.stop="function"
        v-指令名:事件名/属性名.修饰符="值"
        指令名，值
        指令的局部注册：只在当前组件使用
          directives:{
            指令名:{
              // 指令的生命周期
              // 绑定时
              bind(el,binding,vnode){
                el:指令所在标签的dom
                binding:{
                  属性名/事件名
                  修饰符
                  value:指令的值
                }
                vnode:指令所在标签的节点信息，重点它内部有指令所在组件的实例对象this
              },
              // 渲染时（指令所在标签添加到父节点时执行）
              inserted(el,binding,vnode){
              },
              // 更新时 可能更新完成也可能更新没完成（只代表组件有更新）
              update(el,binding,vnode){

              }
              // 指令所在组件包括子组件更新完成时执行
              componentUpdated(el,binding,vnode){
              },
              // 解绑（销毁），只代表指令所在标签销毁（v-if='false'）
              unbind(el,binding,vnode){
              }
            }

            }
            }
          }
        指令的全局注册：所有组件都可使用
        main.js注册
        Vue.directive('指令名',{
          指令生命周期
        })
    -->
    <h1>{{ num }}</h1>
    <button @click="num++">修改num</button>
    <button @click="bol = !bol">修改bol</button>
    <div v-xxx:aaa.stop="num" v-if="bol"></div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      num: 123,
      show: false,
      msg: 'hello',
      bol: true
    }
  },
  directives: {
    xxx: {
      inserted (el, binding, vnode) {
        // console.log(el)
        console.log(binding)
        console.log(vnode.context) // 指令所在组件的this
        console.log('msg', vnode.context.msg)
        el.innerText = binding.value
      },
      componentUpdated (el, binding, vnode) {
        el.innerText = binding.value
      },
      unbind (el, binding, vnode) {
        console.log('unbind')
      }
    }
  }
}
</script>
<style></style>
